<template>
	<div class="container">
		<div class="homeTitle">
			<div>
				今日数据<i>{{ days()[1] }}</i>
			</div>
			<div>
				<div class="detailClass" @click="detailHandle()">
					<div>详细数据</div>
					<el-icon><ArrowRight /></el-icon>
				</div>
			</div>
		</div>
		<div class="containerBox">
			<div class="item">
				<div class="tit">营业额</div>
				<div class="num">¥ {{ overviewData?.turnover }}</div>
			</div>
			<div class="item">
				<div class="tit">有效订单</div>
				<div class="num">{{ overviewData?.validOrderCount }}</div>
			</div>
			<div class="item">
				<div class="tit">订单完成率</div>
				<div class="num">{{ (overviewData?.orderCompletionRate * 100).toFixed(0) }}%</div>
			</div>
			<div class="item">
				<div class="tit">平均客单价</div>
				<div class="num">¥ {{ overviewData?.unitPrice }}</div>
			</div>
			<div class="item">
				<div class="tit">新增用户</div>
				<div class="num">{{ overviewData?.newUsers }}</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="overview">
import { useRouter } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue';
import { getday } from '/@/utils/formValidate';

const router = useRouter();
const props = defineProps({
	overviewData: {
		type: Object,
	},
});

const days: any = () => {
	return getday();
};

const detailHandle = () => {
	router.push({ path: '/statistics' });
};
</script>
<style lang="scss" scoped>
@import '../css/common.scss';
</style>
